import Pubsub from '../../helper/Pubsub.js';
import State from "../../helper/State.js";
import Theme from "../../helper/Theme.js";

/**
 * 左侧快捷按钮
 */

class Activitybar {

  constructor($wrapper) {
    const _this = this;

    _this.$wrapper = $wrapper;
    _this.tpl =
`<a href="javascript:void(0)" data-name="start" class="item" mdui-tooltip="{content: '回到起始页', position: 'right'}">
  <i class="mdui-icon material-icons">home</i>
</a>

<a href="javascript:void(0)" data-name="folder" class="item" mdui-tooltip="{content: '文件夹', position: 'right'}">
  <i class="mdui-icon material-icons">folder</i>
</a>

<a href="javascript:void(0)" data-name="directory" class="item" mdui-tooltip="{content: '文章目录', position: 'right'}">
  <i class="mdui-icon material-icons">dehaze</i>
</a>

<a href="javascript:void(0)" data-name="open-file" class="item" mdui-tooltip="{content: '打开文件', position: 'right'}">
  <i class="mdui-icon material-icons">insert_drive_file</i>
</a>

<a href="javascript:void(0)" data-name="open-folder" class="item" mdui-tooltip="{content: '打开文件夹', position: 'right'}">
  <i class="mdui-icon material-icons">create_new_folder</i>
</a>

<!--<a href="javascript:void(0)" data-name="history" class="item" mdui-tooltip="{content: '历史文件', position: 'right'}">
  <i class="mdui-icon material-icons">history</i>
</a>-->

<div class="item-bottom">
  <a href="javascript:void(0)" data-name="theme" class="item" mdui-tooltip="{content: '日间模式', position: 'right'}">
    <i class="mdui-icon material-icons">invert_colors</i>
  </a>
  
  <a href="javascript:void(0)" data-name="setting" class="item" mdui-tooltip="{content: '设置', position: 'right'}">
    <i class="mdui-icon material-icons">settings</i>
  </a>
</div>`;
    _this.$wrapper.html(_this.tpl);

    _this.$item = {
      start: _this.$wrapper.find('[data-name="start"]'),
      folder: _this.$wrapper.find('[data-name="folder"]'),
      directory: _this.$wrapper.find('[data-name="directory"]'),
      history: _this.$wrapper.find('[data-name="history"]'),
      theme: _this.$wrapper.find('[data-name="theme"]'),
      setting: _this.$wrapper.find('[data-name="setting"]'),
      openFile: _this.$wrapper.find('[data-name="open-file"]'),
      openFolder: _this.$wrapper.find('[data-name="open-folder"]'),
    };

    /**
     * 绑定侧边栏按钮点击事件
     */

    _this.$item.start.on('click', function() {
      Pubsub.emit('page-start-open');
    });

    _this.$item.setting.on('click', function() {
      Pubsub.emit('page-setting-open');
    });

    _this.$item.folder.on('click', function() {
      if (_this.$item.folder.hasClass('active')) {
        Pubsub.emit('sidebar-folder-close');
      } else {
        Pubsub.emit('sidebar-folder-open');
      }
    });

    _this.$item.directory.on('click', function() {
      if (_this.$item.directory.hasClass('active')) {
        Pubsub.emit('sidebar-directory-close');
      } else {
        Pubsub.emit('sidebar-directory-open');
      }
    });

    _this.$item.history.on('click', function() {
      if (_this.$item.history.hasClass('active')) {
        Pubsub.emit('sidebar-history-close');
      } else {
        Pubsub.emit('sidebar-history-open');
      }
    });

    _this.$item.openFile.on('click', function() {
      Pubsub.emit('file-open');
    });

    _this.$item.openFolder.on('click', function() {
      Pubsub.emit('folder-open');
    });

    _this.$item.theme.on('click', function() {
      // 切换 日渐模式/夜间模式 文字
      if (Theme.isLight()) {
        Pubsub.emit('set-theme', 'dark');
      } else {
        Pubsub.emit('set-theme', 'light');
      }
    });

    /**
     * 监听设置主题事件
     */
    Pubsub.subscribe('set-theme', (theme) => {
      State.setConfig('theme', theme);
      if (theme === 'light') {
        Theme.setLight();
        _this.$item.theme.attr('mdui-tooltip', '{content: \'夜间模式\', position: \'right\'}');
      }

      if (theme === 'dark') {
        Theme.setDark();
        _this.$item.theme.attr('mdui-tooltip', '{content: \'日间模式\', position: \'right\'}');
      }
    });

    /**
     * 监听切换主题事件
     */
    Pubsub.subscribe('toggle-theme', () => {
      if (Theme.isLight()) {
        Pubsub.emit('set-theme', 'dark');
      } else {
        Pubsub.emit('set-theme', 'light');
      }
    });

    /**
     * 监听事件，修改侧边按钮状态
     */

    Pubsub.subscribe('sidebar-folder-open', () => {
      _this.$item.folder.addClass('active');
    });

    Pubsub.subscribe('sidebar-folder-close', () => {
      _this.$item.folder.removeClass('active');
    });

    Pubsub.subscribe('sidebar-directory-open', () => {
      _this.$item.directory.addClass('active');
    });

    Pubsub.subscribe('sidebar-directory-close', () => {
      _this.$item.directory.removeClass('active');
    });

    Pubsub.subscribe('sidebar-history-open', () => {
      _this.$item.history.addClass('active');
    });

    Pubsub.subscribe('sidebar-history-close', () => {
      _this.$item.history.removeClass('active');
    });

    Pubsub.subscribe('sidebar-folder-toggle', () => {
      _this.$item.folder.trigger('click');
    });

    Pubsub.subscribe('sidebar-directory-toggle', () => {
      _this.$item.directory.trigger('click');
    });

    Pubsub.subscribe('sidebar-history-toggle', () => {
      _this.$item.history.trigger('click');
    });
  }

}

export default Activitybar;